<template>
    <div class="coupon">
      <h3>用户优惠券</h3>
      <span>用户名：duyuxuan</span>
      <el-button class="add_to" type="info">新增</el-button>
      <br>
      <br>
      <hr>
      <el-input v-model="input" style="width:278px ;height: 25px;padding-left: 20px;" placeholder="优惠券名称/ID" />
      <el-button class="search" type="info">搜索</el-button>
      <br>
      <hr>
      <el-table :data="tableData"  style="width: 100%; " >
      <el-table-column property="id" label="ID" width="100" align="center"/>
      <el-table-column property="name" label="优惠券名称" width="150" align="center"/>
      <el-table-column property="type" label="优惠券类型" width="150" align="center"/>
      <el-table-column property="range" label="指定范围" width="150" align="center"/>
      <el-table-column property="condition" label="使用条件" width="150" align="center"/>
      <el-table-column property="money" label="金额" width="100" align="center"/>
      <el-table-column property="surplus" label="启用状态" width="150" align="center"/>
      <el-table-column property="consumption" label="发放总量" width="120" align="center"/>
      <el-table-column property="balance" label="开始时间" width="120" align="center"/>
      <el-table-column label="操作" width="200" align="center" magin-left="5">
                  <template #default="scope">
                      <button class="button">编辑</button>
                      <button class="button" style="color:red" @click="remove(scope.row.id)">删除</button>
                  </template>
              </el-table-column>
    </el-table>
    <el-pagination  class="paging" background layout="prev, pager, next"  :total="total" :default-page-size="pageSize"
                hide-on-single-page @current-change="pageChange" />
      </div>
  </template>
  
  <script  lang="ts">
 import { getUserCoupon } from '@/api/user'
 import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'coupon',
    data(){
      return{
        input:'',
        tableData:[
          {
            id:'01',
            name:'20元优惠券',
            type:'指定范围',
            range:'男士',
            condition:'购物满100',
            money:20,
            surplus:'20',
            consumption:'是',
            balance:2017,
          },
          {
            id:'02',
            name:'20元优惠券',
            type:'指定范围',
            range:'女士',
            condition:'购物满100',
            money:20,
            surplus:'20',
            consumption:'是',
            balance:2017,
          },
          {
            id:'03',
            name:'20元优惠券',
            type:'指定范围',
            range:'无',
            condition:'购物满0',
            money:20,
            surplus:'20',
            consumption:'是',
            balance:2017,
          },
        ],
        total: 1,
      pageSize: 5,
      }
    },
    methods:{
      remove(id:any){
    
    this.tableData= this.tableData.filter(item=>{
      return item.id != id
    })
  
  },
      // 分页切换
      pageChange(page:any) {
            this.userCoupon(page)
        },
        // 请求配送记录数据
        async userCoupon(page=1) {
            const res = await getUserCoupon(page)
            console.log(res)
            //@ts-ignore
            const {list,total,pageSize} = res
            //@ts-ignore
            this.tableData = list
            //@ts-ignore
            this.total = total
            //@ts-ignore
            this.pageSize = pageSize
        }
    },
    created() {
      //@ts-ignore
        this.userCoupon()
    },
    
  })
  
  </script>
  
  <style scoped lang="less">
  .coupon h3 {
    font-size: 18px;
    font-weight: 600;
    float: left;
    padding-left: 20px;
  }
  .coupon span {
    display: inline-block;
    margin-top: 2px;
    margin-left: 30px;
    font-size: 16px;
  }
    .add_to {
      display: block;
      float: right;
      margin-right: 200px;
      border-radius: 0;
    }
    .search{
      margin-left: 50px;
      border-radius: 0;
    }
    .button {
      border: none;
      background-color: #fff;
      margin-left: 10px;
    }
    .paging {
    margin-top: 50px;
    margin-left: 450px;
    
  }
  </style>
  